<form dForm ngForm [layout]="formLayout" [dValidateRules]="formConfig.rule" #form="dValidateRules" (dSubmit)="submitForm($event)">
  <div class="modal-body" style="padding: 0px 48px 0px 48px">
    <d-form-item>
      <d-form-label [required]="true">{{ 'datadev.datasourceName' | translate }}</d-form-label>
      <d-form-control>
        <input
          dTextInput
          name="datasourceName"
          [(ngModel)]="formData.datasourceName"
          [dValidateRules]="formConfig.datasourceNameRules"
          [disabled]="data.item?.item?.id"
        />
      </d-form-control>
    </d-form-item>
    <d-form-item>
      <d-form-label [required]="true">{{ 'datadev.host' | translate }}</d-form-label>
      <d-form-control>
        <input
          dTextInput
          name="host"
          [(ngModel)]="formData.host"
          [dValidateRules]="formConfig.hostRules"
          (ngModelChange)="passwordChange($event, false)"
        />
      </d-form-control>
    </d-form-item>
    <d-form-item>
      <d-form-label [required]="true">{{ 'datadev.databaseName' | translate }}</d-form-label>
      <d-form-control>
        <input
          dTextInput
          name="databaseName"
          [(ngModel)]="formData.databaseName"
          [dValidateRules]="formConfig.databaseNameRules"
          (ngModelChange)="passwordChange($event, false)"
        />
      </d-form-control>
    </d-form-item>
    <d-form-item>
      <d-form-label [required]="true">{{ 'datadev.port' | translate }}</d-form-label>
      <d-form-control>
        <input
          dTextInput
          name="port"
          [(ngModel)]="formData.port"
          [dValidateRules]="formConfig.portRules"
          (ngModelChange)="passwordChange($event, false)"
        />
      </d-form-control>
    </d-form-item>
    <d-form-item>
      <d-form-label [required]="true">{{ 'datadev.username' | translate }}</d-form-label>
      <d-form-control>
        <input
          dTextInput
          name="username"
          [(ngModel)]="formData.username"
          [dValidateRules]="formConfig.usernameRules"
          (ngModelChange)="passwordChange($event, false)"
        />
      </d-form-control>
    </d-form-item>
    <d-form-item>
      <d-form-label [required]="true">{{ 'datadev.password' | translate }}</d-form-label>
      <d-form-control>
        <input
          dTextInput
          [type]="'password'"
          name="password"
          [(ngModel)]="formData.password"
          [dValidateRules]="formConfig.passwordRules"
          (ngModelChange)="passwordChange($event, true)"
        />
      </d-form-control>
    </d-form-item>
    <d-form-item>
      <d-form-label [required]="true">{{ 'datadev.port.http' | translate }}</d-form-label>
      <d-form-control>
        <input dTextInput name="httpPort" [(ngModel)]="formData.httpPort" [dValidateRules]="formConfig.httpPortRules" />
      </d-form-control>
    </d-form-item>
    <d-form-item>
      <d-form-label>{{ 'datadev.remark' | translate }}</d-form-label>
      <d-form-control>
        <input dTextInput name="remark" [(ngModel)]="formData.remark" [dValidateRules]="formConfig.remarkRules" />
      </d-form-control>
    </d-form-item>
    <d-form-item>
      <d-form-label>{{ 'datadev.additionalProps' | translate }}</d-form-label>
      <d-form-control>
        <textarea
          dTextarea
          [resize]="'vertical'"
          name="additionalPropsStr"
          [placeholder]="additionalPropsPlaceholder"
          [(ngModel)]="formData.additionalPropsStr"
          (ngModelChange)="passwordChange($event, false)"
        ></textarea>
      </d-form-control>
    </d-form-item>
  </div>
  <div class="modal-footer" style="text-align: right; padding-right: 42px">
    <d-form-operation>
      <d-button style="margin-right: 4px" bsStyle="danger" (btnClick)="testConnection()">{{ 'datadev.testConnect' | translate }}</d-button>
      <d-button style="margin-right: 4px" bsStyle="common" (btnClick)="data.item.onClose($event)">{{
        'app.common.operate.cancel.label' | translate
      }}</d-button>
      <d-button bsStyle="primary" dFormSubmit>{{ 'app.common.operate.confirm.label' | translate }}</d-button>
    </d-form-operation>
  </div>
</form>
